<template>
  <el-header>
    <el-row>
      <el-col :span="18">
        <el-button type="text">退出编辑</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain>保存并发布</el-button>
        <el-button type="primary" plain>保存</el-button>
        <el-button type="primary" plain>取消</el-button>

      </el-col>
    </el-row>
  </el-header>
  <el-row class="contains">
    <!-- 菜单列表     -->
    <section class="section-left">
      <div class="menu-item" v-for="(item,index) in menuData" :key="index"
           :class="activeItem === index ? 'active' : ''">
        <div class="menu-parent" @click="handleActiveIndex(index)">
          <component class="menu-icon" :is="item.icon"/>
          <span class="menu-title">{{ item.title }}</span>
        </div>
        <draggable
            class="menu-child"
            v-model="childMenu"
            :group="{ name: 'component', pull: 'clone', put: false }"
            @end="handleEndComponent"
            :sort="false"
            @clone="handleCloneComponent"
            item-key="id">
          <template #item="{element}">
            <div class="menu">
              <component class="menu-icon" :is="element.icon"/>
              <span class="menu-title">{{ element.title }}</span>
            </div>
          </template>
        </draggable>
      </div>
    </section>
    <!-- 组件预览-->
    <el-col :span="15" class="section-middle">
      <div class="page-box" :style="{backgroundColor: pageInfo.backgroundColor}">
        <div class="page-header">
          <div class="time">{{ pageHeader.time }}</div>
          <div class="title">{{ pageInfo.title }}</div>
        </div>
        <draggable
            class="page"
            v-model="pageData"
            @start="drag=true"
            @end=""
            item-key="id"
            v-bind="dragOptions">
          <template #item="{element,index}">
            <div class="editor-component-item" @click="handleActiveComponent(element,index)">
              <div class="editor-component-item-move" v-show="index === componentActive.index">
                <el-icon class="btn operate-move" @click.stop="handleMoveComponent(index,'up')"
                         v-show="element.index !== 0"
                         style="vertical-align: middle">
                  <SortUp/>
                </el-icon>
                <el-icon class="btn operate-move" @click.stop="handleMoveComponent(index,'down')"
                         v-show="index + 1!== pageData.length" style="vertical-align: middle">
                  <SortDown/>
                </el-icon>
                <el-popconfirm confirm-button-text="确认" cancel-button-text="取消"
                               :icon="InfoFilled"
                               icon-color="#626AEF"
                               title="确认删除"
                               @confirm="handleMoveComponent(index,'del')">
                  <template #reference>
                    <el-icon class="btn operate-delete" style="vertical-align: middle">
                      <CircleClose/>
                    </el-icon>
                  </template>
                </el-popconfirm>
              </div>
              <zui-banner v-if="element.componentType === 'banner'"></zui-banner>
              <zui-search v-else-if="element.componentType === 'search'"></zui-search>
              <zui-text v-else-if="element.componentType === 'text'" :data="pageData[index].config"></zui-text>
              <zui-rich-text v-else-if="element.componentType === 'richText'"></zui-rich-text>
              <div class="editor-component-item-active"
                   :class="index === componentActive.index? 'active' : ''"></div>
            </div>
          </template>
        </draggable>
      </div>
    </el-col>
    <!-- 组件设置 -->
    <section class="section-right">
      <div class="header-tab">
        <el-radio-group v-model="setRadio" size="large">
          <el-radio-button label="页面设置"/>
          <el-radio-button label="组件设置"/>
        </el-radio-group>
      </div>
      <div v-if="setRadio === '页面设置'" class="editor-contains">
        <el-row>
          <span class="editor-type-name">页面名称</span>
          <el-input v-model="pageInfo.title" placeholder="输入页面名称"/>
        </el-row>
        <el-row class="zui-flex-column">
          <span class="editor-type-name">背景颜色</span>
          <el-color-picker v-model="pageInfo.backgroundColor"/>
        </el-row>
        <el-row class="zui-flex-column">
          <span class="editor-type-name">背景图片</span>
          <mine-upload :image-url="pageInfo.backgroundImg" @uploadImgSuccess="uploadBackgroundImg"></mine-upload>
        </el-row>
      </div>
      <div v-else-if="setRadio === '组件设置'" class="editor-contains">
        <!--        {{ componentActive }}-->
        <div v-if="componentActive.componentType === 'text'">
          <el-row>
            <span class="editor-type-name">文本内容</span>
            <el-input v-model="pageData[componentActive.index].config.content" :rows="2" type="textarea"
                      placeholder="输入文本内容"/>
          </el-row>
          <el-row class="zui-flex-column">
            <span class="editor-type-name">文字大小</span>
            <el-input-number v-model="pageData[componentActive.index].config.fontSize" size="small"
                             placeholder="设置文字大小"/>
          </el-row>
          <el-row class="zui-flex-column">
            <span class="editor-type-name">文字颜色</span>
            <el-color-picker v-model="pageData[componentActive.index].config.fontColor"/>
          </el-row>
          <el-row class="zui-flex-column">
            <span class="editor-type-name">对齐方式</span>
            <div>
              <el-radio v-model="pageData[componentActive.index].config.align" label="left" size="small">左</el-radio>
              <el-radio v-model="pageData[componentActive.index].config.align" label="center" size="small">中</el-radio>
              <el-radio v-model="pageData[componentActive.index].config.align" label="right" size="small">右</el-radio>
            </div>
          </el-row>
          <el-row class="zui-flex-column">
            <span class="editor-type-name">背景颜色</span>
            <el-color-picker v-model="pageData[componentActive.index].config.backgroundColor"/>
          </el-row>
          <el-divider/>
        </div>
      </div>
    </section>
  </el-row>
</template>

<script>
import draggable from 'vuedraggable'
import {computed, onMounted, ref, getCurrentInstance} from 'vue'
import MineUpload from "@/components/mine-upload";
import {Plus, Key, EditPen, SortUp, SortDown, CircleClose, InfoFilled} from "@element-plus/icons-vue/dist/index.mjs"

export default {
  name: "index",
  components: {
    MineUpload,
    draggable,
    Plus, Key, EditPen, SortUp, SortDown, CircleClose, InfoFilled
  },
  setup() {
    const activeItem = ref(0);
    const pageHeader = ref({
      time: new Date().format('HH:mm')
    })
    const pageData = ref([])
    const menuData = ref([
      {
        icon: 'Plus',
        title: '基础组件',
        children: [
          {
            icon: 'Search',
            title: '搜索',
            componentType: 'search'
          }, {
            icon: 'EditPen',
            title: '轮播',
            componentType: 'banner'
          }, {
            icon: 'EditPen',
            title: '文本',
            componentType: 'text'
          },
          {
            icon: 'EditPen',
            title: '富文本',
            componentType: 'richText'
          }

        ]
      },
      {
        icon: 'Key',
        title: '测试组件',
        children: [
          {
            icon: 'Search',
            title: '搜索',
            componentType: 'search'
          }, {
            icon: 'EditPen',
            title: '轮播',
            componentType: 'banner'
          },

        ]
      },
    ])
    const childMenu = ref([])
    const componentActive = ref({})
    const setRadio = ref('页面设置');
    const {proxy} = getCurrentInstance();
    const pageInfo = ref({
      title: '页面标题',
      backgroundColor: '#e5e6e7',
      backgroundImg: ''
    })
    /**
     * 激活组件菜单列表
     * @param index
     */
    const handleActiveIndex = (index) => {
      activeItem.value = index
      childMenu.value = menuData.value[index].children
    }
    /**
     * 克隆组件
     */
    const handleCloneComponent = (ele) => {
      // console.log(ele,"clone")
    }
    /**
     * 结束拖拽,设置刚拖拽的组件为选中组件
     */
    const handleEndComponent = (ele) => {
      //初始化组件配置信息
      let currentComponent = pageData.value[ele.newIndex]
      handleActiveComponent(currentComponent, ele.newIndex)
      let config = {}
      switch (currentComponent.componentType) {
        case "text":
          config.content = ''
          config.fontSize = 12
          config.fontColor = '#000000'
          config.backgroundColor = '#FFFFFF'
          config.align = 'left'
          break
      }
      pageData.value[ele.newIndex].config = config

    }
    /**
     * 激活选中的组件
     * @param ele
     * @param index
     */
    const handleActiveComponent = (ele, index) => {
      componentActive.value = ele
      componentActive.value.index = index
    }
    /**
     *  移动组件的位置
     * @param index
     * @param t
     */
    const handleMoveComponent = (index, t) => {
      let current = pageData.value[index]
      switch (t) {
          //向上移动
        case 'up':
          if (index === 0) return
          pageData.value[index] = pageData.value[index - 1];
          pageData.value[index - 1] = current;
          handleActiveComponent(current, index - 1)
          break
        case 'down':
          if (index === pageData.value.length) return
          pageData.value[index] = pageData.value[index + 1];
          pageData.value[index + 1] = current;          //向下移动
          handleActiveComponent(current, index + 1)
          break
        case 'del':
          //移除组件
          pageData.value.splice(index, 1)
          break;
        default:
          break
      }
    }

    const uploadBackgroundImg = (data) => {
      pageInfo.value.backgroundImg = data
    }

    /**
     * vue drag参数
     * @type {ComputedRef<{ghostClass: string, draggable: string, disabled: boolean, animation: number, group: string, direction: string}>}
     */
    const dragOptions = computed(() => {
      return {
        animation: 300,
        disabled: false,
        ghostClass: 'ghostClass',
        draggable: '.editor-component-item',
        group: 'component',
        direction: 'vertical'
      };
    })

    onMounted(() => {
      childMenu.value = menuData.value[0].children
    })
    return {
      menuData,
      childMenu,
      activeItem,
      pageHeader,
      pageData,
      dragOptions,
      componentActive,
      setRadio,
      pageInfo,
      InfoFilled,
      handleActiveIndex,
      handleCloneComponent,
      handleActiveComponent,
      handleMoveComponent,
      handleEndComponent,
      uploadBackgroundImg
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../../zui/dist/zui.css';
@import "config";
</style>
